import {ScrollView, View} from '@tarojs/components'
import {useState, useEffect} from 'react'

import './index.scss'

export default props => {
  const {list, value ,style={}, onChange, fixed, page} = props
  const [toView, setToView] = useState(1)
  console.log(page);
  useEffect(() => {
    return () => {
      console.log(1);
    }
  }, [])
  const changeCate = item => {
    setToView(item.id)
    onChange('cate', item.cate)
  }
  const tabbar = () => (
    list.map(item => (
      <View 
        key={item.id}
        id={'c' + item.id}
        className={["tabbar-item", value === item.cate ? 'action' : '']}
        style={{
          color: style.color, 
          fontSize: style.fontSize, 
          fontWeight: value === item.cate && style.fontWeight,
          borderBottom: value === item.cate && style.border
        }}
        onClick = {() => changeCate(item)}
      >
        {item.cate_zh}
      </View>
    ))
  )
  return (
  <ScrollView
    className="scrollview" 
    scrollX={true}
    enableFlex={true}
    scrollLeft={'-13rpx'}
    style={{backgroundColor:style.bgcolor, position: fixed ? 'fixed' : 'static'}}
    scrollIntoView={'c'+(toView-2)}
  >
    {tabbar()}
  </ScrollView>
  )
}